<!DOCTYPE html>
<html lang="en">
<head>
    <link href="css/main.css" rel="stylesheet">
    <link rel="stylesheet" href="css/animate.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/main.js"></script>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            font-family: 微软雅黑, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            user-select: none;
            animation-duration: 1s;
        }
    </style>
</head>
<body>
<div id="app">
    <header class="xHeader" id="head">
        {{title}}
    </header>
    <form class="xForm">
        <div>
            <label class="xInputTittle">邮箱</label>
            <label>
                <input class="xInput" type="email" v-model="mail">
            </label>
            <p class="xPrompt">输入您的注册邮箱</p>
            <div class="clapboard"></div>
        </div>
        <div>
            <label class="xInputTittle">密码</label>
            <label>
                <input class="xInput" type="password" v-model="passwd">
            </label>
            <p class="xPrompt">输入您的登录密码</p>
            <div class="clapboard"></div>
        </div>
        <div>
            <label class="xInputTittle">验证码</label>
            <label>
                <input class="xInput" type="text" v-model="captcha">
            </label>
            <p class="xPrompt">输入您在下图中看到的文字, 若看不清请点击切换</p>
            <img alt=" 验证码加载失败" id="captchaImg" :src="captchaSrc" @click="refreshCaptcha()">
            <div class="clapboard"></div>
        </div>
    </form>

    <div style="width: 61.8%; margin: auto">
        <div class="xButton xLongButton" style="margin: 18px" @click="login()" @mouseenter="menter"
             @mouseleave="mleave">
            <div class="centerText">猛击登录>></div>
        </div>
        <div class="xButton xLongButton" style="margin: 18px" @click="rd(urls.register)" @mouseenter="menter" @mouseleave="mleave">
            <div class="centerText">没有账号?猛击注册>></div>
        </div>
        <div class="xButton xLongButton" style="margin: 18px" @click="rd(urls.recovery)" @mouseenter="menter"
             @mouseleave="mleave">
            <div class="centerText">忘记密码?猛击找回>></div>
        </div>
    </div>
</div>
</body>

<script type="application/javascript">
    const a = new Vue({
        el: "#app",
        data: {
            title: "用户登录, 欢迎回来!",
            lastCaptchaTime: 0,
            mail: "",
            passwd: "",
            captcha: "",
            captchaSrc: "/captcha/get",
            axPost: null,
            axGet: null,
            urls: {
                workbench: "workbench.html",
                register: "register.html",
                recovery: "recovery.html",
                login: "/user/login"
            },
            texts: {
                wrongCaptcha: "验证码错误，请重新输入",
                wrongPasswd: "用户名或密码错误",
                unknownErr: "unknown error"
            }
        },
        methods: {
            stringify: function (obj) {
                let res = "";
                for (let pro in obj) { // noinspection JSUnfilteredForInLoop
                    res += "&" + pro + "=" + obj[pro];
                }
                return res.substr(1);
            },
            refreshCaptcha: function () {
                if (new Date().getTime() - this.lastCaptchaTime < 100 * 1000) {
                    this.title = "验证码每100秒只能获取一次, 请稍等.";
                    return;
                }
                this.lastCaptchaTime = new Date().getTime();
                this.captchaSrc = "/captcha/get?t=1" +this.lastCaptchaTime;
            },
            rd: function (url) {
                window.location.href = url;
            },
            menter: function (obj) {
                obj.currentTarget.style.backgroundColor = "#3a3f4d";
            },
            mleave: function (obj) {
                obj.currentTarget.style.backgroundColor = "#555555";
            },
            login: function () {
                this.axPost
                    .post(this.urls.login, this.stringify({
                        mail: this.mail,
                        passwd: this.passwd,
                        captcha: this.captcha
                    }))
                    .then(resp => {
                        if (resp.data.status) {
                            window.location.href = "workbench.html";
                        } else {
                            if (resp.data.value === "captcha") {
                                this.title = this.texts.wrongCaptcha;
                                this.refreshCaptcha();
                                return;
                            }
                            if (resp.data.value === "passwd") {
                                this.title = this.texts.wrongPasswd;
                                return;
                            }
                            this.title = this.texts.unknownErr;
                        }
                    })
                    .catch(() => {
                        this.title = "数据请求似乎出错了, 请刷新页面重试或检查网络";
                    })
            }
        },
        created: function () {
            this.axGet = axios.create({
                url: window.location.host,
                method: "get",
                responseType: 'json'
            });
            this.axPost = axios.create({
                url: window.location.host,
                method: "post",
                responseType: "json",
                contentType: "application/x-www-form-urlencoded"
            });
        }
    })
</script>
</html>